
<template>
  <div class="readerContent" v-bind:style="readStyle" style="z-index:2">
    <div v-if="!content" class="loading">
      
      <a-spin size="large"/>
    </div>
    <div v-else id="content" >
      <!-- 章节标题 -->
      <div id="title">{{tit}}</div>
      <!-- 显示章节内容的容器，高度固定，97% -->
      <div id="container" ref="container">
        <!-- 内容高度-->
        <div id="chapter" ref="chapter">
          

            <div  v-html="content" id="txt"></div>

          
          <div id="control">
            <!-- <div class="left" @click="$emit('clickContent','pre')" ></div> -->
            <div class="left" @click="pre()"></div>
            <div class="modle" @click="$emit('controlMenu',true)"></div>
            <div class="right" @click="next()"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Spin} from 'ant-design-vue'

export default {
  name: "Content",
  components:{
    'a-spin':Spin
  },
  data: () => {
    return {
      chapterHeight: "auto",
      scrollDidtance: 0
    };
  },
  props: ["tit","content"],

  computed: {
    readStyle() {
      return this.$store.state.readStyle;
    }
  },
  updated() {},
  methods: {
    // 下一页
    next() {
      // 滚动距离
      var conScroll = this.$refs.container.scrollTop;
      // 容器高度
      var conHeight = this.$refs.container.offsetHeight;
      // 内容高度
      var chapHeight = this.$refs.chapter.offsetHeight;

      // 判断是否滚动到了最下面(这个判断方法有点问题，需要改一下)
      if (conScroll + conHeight < chapHeight) {
        this.$refs.container.scrollTop += conHeight;
      } else {
        this.$emit("changeChapter", "next");
      }
    },
    // 上一页
    pre() {
      // 滚动距离
      var conScroll = this.$refs.container.scrollTop;
      // 容器高度
      var conHeight = this.$refs.container.offsetHeight;
      // 内容高度
      // var chapHeight = this.$refs.chapter.offsetHeight;
      
      // 判断是否滚动到了最上面
      if (conScroll === 0) {
        this.$emit("changeChapter", "pre");
      } else {
        this.$refs.container.scrollTop -= conHeight;
      }
    }
  }
};
</script>

<style scoped lang='less'>

.loading{
  width:100%;
  height: 100%;
  padding-top: 200px;
  text-align: center;
}

@media screen and (max-width:420px){



.loading {
  margin: 200px auto;
}
#content {
  height: 100%;
  width: 100%;
  position: absolute;
   word-break: break-word;
}
#title {
  height: 20px;
  width: 100%;
  border-bottom: 1px solid lightgray;
  text-align: center;
  font-size: small;
  position: absolute;
  top: 0;
}
#container {
  position: absolute;
  top: 20px;
  height: 97%;
  overflow-y: auto;
  overflow-x: auto;
  padding-top: 20px;
}
#chapter {
  width: 96%;
  margin: 5px auto;
  font-family: "宋体";
  position: relative;
  overflow: auto
  /* */
}

#control {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
}
#control div {
  flex: 1;
}
.content p {
  margin-top: 0px;
  margin-bottom: 5px;
  border-bottom: 1px solid lightgray;
}
.readerContent{
   width: 100%;
      height: 100%;
      position: absolute;
      top: 0
}
}
@media screen and (min-width:420px){
  #container{
    padding-top: 20px;
  }
    .readerContent{
      width: 100%;
      height: 100%;
      overflow: auto;
      position: relative;
      #content{
        width: 100%;
        height: 95%;
        position: absolute;
        #title{
          text-align: center
        }
        #container{
          width: 100%;
        height: 100%;
        overflow: auto;
        #chapter{
          position: relative;
          height: auto;
          #control{
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          display: flex;
          div{
            flex: 1
          }
        }
        }
        }
        
      }
    }

}
</style>


